<template>
  <HeaderNavTabarVue :title="'账号与安全'" />
  <view class="container">
    <uni-list>
      <uni-list-item
        :extraIcon="{ type: 'person-filled' }"
        :rightText="user.nickName"
        showExtraIcon="true"
        title="昵称"
      />
      <uni-list-item
        :extraIcon="{ type: 'phone-filled' }"
        :rightText="user.phonenumber"
        showExtraIcon="true"
        title="手机号码"
      />
<!--      <uni-list-item-->
<!--        :extraIcon="{ type: 'email-filled' }"-->
<!--        :rightText="user.email"-->
<!--        showExtraIcon="true"-->
<!--        title="邮箱"-->
<!--      />-->
      <uni-list-item
        :extraIcon="{ type: 'auth-filled' }"
        :rightText="postGroup"
        showExtraIcon="true"
        title="岗位"
      />
      <uni-list-item
        :extraIcon="{ type: 'staff-filled' }"
        :rightText="roleGroup"
        showExtraIcon="true"
        title="角色"
      />
      <uni-list-item
        :extraIcon="{ type: 'calendar-filled' }"
        :rightText="user.createTime"
        showExtraIcon="true"
        title="创建日期"
      />
      <uni-list-item
        :extraIcon="{ type: 'locked-filled' }"
        showExtraIcon="true"
      >
        <template #body>
          <view
            style="display: flex; align-items: center; font-size: 14px; color: #3b4144; width: 100%"
            @tap="handleEditPassword"
          >
            <text class="rightText">修改密码</text>
          </view>
        </template>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<script>
import { getUserProfile } from '@/api/system/user'
import HeaderNavTabarVue from '@/components/HeaderNavTabar/HeaderNavTabar.vue'

export default {
  components: { HeaderNavTabarVue },
  data() {
    return {
      user: {},
      roleGroup: '',
      postGroup: '',
    }
  },
  onLoad() {
    this.getUser()
  },
  methods: {
    getUser() {
      getUserProfile().then((response) => {
        this.user = response.data
        this.roleGroup = response.roleGroup
        this.postGroup = response.postGroup
      })
    },
    handleEditPassword() {
      uni.navigateTo({
        url: '/pages/mine/pwd/index',
      })
    }
  },
}
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}
</style>
